<template>
	<view class="homeDetails">
		<view class="homeDetails_title">
			<uni-nav-bar left-icon="back" fixed background-color="rgb(165, 10, 11)" :border="false" color="#fff"
				@clickLeft="backFun" title="商品列表"></uni-nav-bar>
		</view>
		<view class="homeDetails_box">
			<view class="homeDetails_box_item" v-for="(item,index) in list" :key="index" @click="gotoFun(item.id)">
				<view class="homeDetails_box_item_title">
					{{item.title}}
				</view>
				<view class="homeDetails_box_item_box">
					<image class="homeDetails_box_item_box_img" :src="item.thumb" mode=""></image>
					<!-- <p>库存：{{item.total}}</p>
					<p>已售：{{item.yishou}}</p> -->
					<view class="homeDetails_box_item_box_pic">
						<view class="homeDetails_box_item_box_pic_jiage">
							{{item.marketprice}}
						</view>
						<view class="homeDetails_box_item_box_pic_an">
							购买
						</view>
					</view>
					<!-- <view class="homeDetails_box_item_box_dou">
						<span style="color: rgb(165, 10, 11);font-size: 28rpx;">中易豆：</span>{{item.zhongyidou}}
					</view>
					<view class="homeDetails_box_item_box_huacai">
						<span style="color: rgb(165, 10, 11);font-size: 28rpx;">华彩值：</span>{{item.huacaizhi}}
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api_index_goods_search
	} from '@/api/home.js';

	export default {
		data() {
			return {
				openid: '',
				id: '',
				page: 1,
				list: ''
			}
		},
		onLoad(e) {
			this.id = e.type
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.homeDetailsFun();
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			gotoFun(id) {
				uni.navigateTo({
					url: `/pages/home/shangpinxiangqing/shangpinxiangqing?goodsid=${id}`
				})
			},
			async homeDetailsFun() {
				let up = {
					page: this.page,
					goods_gift: this.id
				}
				let data = await api_index_goods_search(up);
				if (data.error === 0) {
					this.list = data.list;
				}
				console.log(this.list);
			}
		}
	}
</script>

<style lang="scss">
	.homeDetails {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.homeDetails_title {
			width: 100%;
			height: 88rpx;
			box-sizing: content-box;
			padding-top: var(--status-bar-height);
			background-color: rgb(165, 10, 11);
			position: fixed;
			top: 0;
			z-index: 100;
		}

		.homeDetails_box {
			width: 100%;
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 30rpx;
			padding-top: var(--status-bar-height);
			margin-top: 90rpx;

			.homeDetails_box_item {
				width: 48%;
				// height: 560rpx;
				height: 460rpx;
				margin: 30rpx 0;
				// overflow: hidden;
				box-sizing: border-box;
				background-color: #fff;
				border: 1px solid #d5d5d5;
				display: flex;
				flex-direction: column;

				.homeDetails_box_item_title {
					width: 100%;
					height: 64rpx;
					background-color: rgb(165, 10, 11);
					line-height: 64rpx;
					color: #fff;
					text-align: center;
					font-size: 28rpx;
				}

				.homeDetails_box_item_box {
					width: 100%;
					// height: 100%;
					flex: 1;
					box-sizing: border-box;
					padding: 20rpx;

					.homeDetails_box_item_box_dou,
					.homeDetails_box_item_box_huacai {
						font-size: 28rpx;
					}

					.homeDetails_box_item_box_img {
						width: 100%;
						height: 300rpx;
					}

					.homeDetails_box_item_box_pic {
						width: 100%;
						display: flex;
						height: 46rpx;
						line-height: 46rpx;
						justify-content: space-between;

						.homeDetails_box_item_box_pic_jiage {
							font-size: 30rpx;
						}

						.homeDetails_box_item_box_pic_an {
							width: 122rpx;
							height: 100%;
							background-color: #be112f;
							text-align: center;
							font-size: 26rpx;
							border-radius: 10rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>